<template>
  <div class="navigation-bar">
    <div class="brief-title">
      <span>导航栏</span>
    </div>
    <div v-if="menu" class="boxs">
      <div class="box"
        v-for="(item, index) in menu"
        :key="index"
        :class="item.code"
      >
        <div class="nav-title-group">
          <div class="nav-line"></div>
          <div class="nav-title">{{ item.name }}</div>
        </div>
        <div class="nav-container">
          <div
            v-for="(_item, _index) in item.children"
            :key="_index"
            class="nav-wrapper"
          >
            <div
              v-for="(item, index) in _item.children"
              :key="index"
              :class="item.noMenu ? 'nav-item active' : 'nav-item'"
              @click="item && item.path ? toLink(item.path) : ''"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <div
        v-for="(item, index) in navbarlist"
        :key="index"
        :class="item.class"
      >
        <div class="nav-title-group">
          <div class="nav-line"></div>
          <div class="nav-title">{{ item.name }}</div>
        </div>
        <div class="nav-container">
          <div
            v-for="(_item, _index) in item.children"
            :key="_index"
            class="nav-wrapper"
          >
            <div
              v-for="(item, index) in _item"
              :key="index"
              :class="item.noMenu ? 'nav-item active' : 'nav-item'"
              @click="item && item.url ? toLink(item.path) : ''"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from "vuex";

export default {
  name: "navigation-teacher",
  data() {
    return {
      navbars: [
        {
          title: "信息查询",
          class: "",
          navs: [
            [
              { name: "个人信息", isActive: false },
              { name: "优质课信息", isActive: false },
            ],
            [
              { name: "教学任务", isActive: false },
              { name: "评教结果", isActive: false },
            ],
            [
              { name: "课表", isActive: false },
              { name: "领导听查课信息", isActive: false },
            ],
            [
              { name: "空闲场地", isActive: false },
              { name: "课题信息", isActive: false },
            ],
            [
              { name: "教学基础数据", isActive: false },
              { name: "教学绩效信息", isActive: false },
            ],
            [
              { name: "课时量", isActive: true },
              { name: "公共考试成绩", isActive: false },
            ],
          ],
        },
        {
          title: "教学计划与实施",
          class: "yellow",
          navs: [
            [
              { name: "核对教学任务(教材)", isActive: false },
              { name: "打印选修课花名册", isActive: false },
            ],
            [
              {
                name: "填报课时量",
                isActive: true,
                url: "/teacher/classHours/classHoursAddList",
              },
            ],
          ],
        },
        {
          title: "课程考核",
          class: "red",
          navs: [
            [
              {
                name: "填报课程考核实施计划",
                isActive: true,
                url: "/teacher/assessmentPlan",
              },
              {
                name: "试卷命题和审批",
                isActive: true,
                url: "/teacher/propositionReview/approval",
              },
            ],
            [
              { name: "安排考试(调整监考)", isActive: true },
              {
                name: "打印试卷册材料",
                isActive: true,
                url: "/teacher/paperPrint",
              },
            ],
            [
              {
                name: "录入、打印课程成绩",
                isActive: true,
                url: "/teacher/courseAchievement/printEntry",
              },
              { name: "在线考试", isActive: false },
            ],
          ],
        },
        {
          title: "学员评教",
          class: "green",
          navs: [
            [
              {
                name: "评教信息核对",
                isActive: true,
                url: "/teacher/teachingPlan/infoCheck",
              },
              {
                name: "查看参评课程",
                isActive: true,
                url: "/teacher/eligible/eligibleCourse",
              },
            ],
          ],
        },
        {
          title: "教学课题及成果",
          class: "grep",
          navs: [
            [
              { name: "课题申报", isActive: true },
              { name: "课题评审", isActive: true },
            ],
          ],
        },
        {
          title: "督导评教",
          class: "purple",
          navs: [
            [
              {
                name: "督导评教",
                isActive: true,
                url: "/teacher/appraisal/supervision",
              },
              { name: "督导组长查看", isActive: true },
            ],
          ],
        },
      ],
      isMenu: false
    }
  },
  created() {
  },
  methods: {

    toLink(url) {
      if(url!=='/'){
        this.$router.push(url);
      }

    }
  },
  mounted() {
  },
  computed: {
    ...mapGetters(["menu"]),

  },//计算属性
}
</script>

<style lang="less" scoped>
@import "../../../styles/home";
.main-container {
  .left-container {
    .user-info {
      > img {
        vertical-align: 10px;
      }
      > div {
        div {
          line-height: 35px;
        }
      }
    }
  }
  .right-container {
    .common-functions {
      ul {
        li {
          width: 326px;
        }
      }
    }
    .block-container {
      .navigation-bar {
        > div {
          &:nth-child(2) {
            margin-top: 10px;
          }
        }
        .nav-title-group {
          margin-top: 0;
        }
        .nav-container {
          padding: 10px 33px 0;
          .nav-wrapper {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-bottom: 12px;
            width: 100%;
            .nav-item {
              font-size: 18px;
              color: #666666;
            }
            .active {
              color: #104e98;
              cursor: pointer;
            }
          }
        }

        .yellow {
          .nav-line {
            border: 1px solid #f5c33a;
          }
          .nav-title {
            background: #fff6ef;
            border: 1px solid #f3b815;
            color: #f3b815;
          }
        }
        .grep {
          .nav-line {
            border: 1px solid #999999;
          }
          .nav-title {
            background: #dcdcdc;
            border: 1px solid #666666;
            color: #666666;
          }
        }
        .red {
          .nav-line {
            border: 1px solid #fd3819;
          }
          .nav-title {
            background: #ffefef;
            border: 1px solid #ff3819;
            color: #ff3819;
          }
        }
        .purple {
          .nav-line {
            border: 1px solid #5230e9;
          }
          .nav-title {
            background: #efebff;
            border: 1px solid #5230e9;
            color: #5230e9;
          }
        }
        .green {
          .nav-line {
            border: 1px solid #22c86c;
          }
          .nav-title {
            background: #f1fff8;
            border: 1px solid #02c86c;
            color: #02c86c;
          }
        }
      }
    }
  }
}
</style>
